<template>
  <div class="navbar flex align-center justify-end">
    <create-dir-layer ref="createdir" />
    <router-link class="nav-item link" to="/">首页</router-link>
    <a href="javascript:void(0);" class="nav-item link" @click="showCreateDirLayer">新建目录</a>
    <router-link class="nav-item link" :to="`/${projectid}/create/docs`">新建文档</router-link>
    <router-link class="nav-item link" to="/">导出</router-link>
    <router-link class="nav-item link" to="/">注销登录</router-link>
  </div>
</template>

<script>
import createDirLayer from "./create-dir-layer.vue";
export default {
  name: "navbar",
  components: {
    createDirLayer,
  },
  created() {
    this.projectid = this.$route.params.projectid;
  },
  data: () => ({
    projectid: "",
  }),
  methods: {
    showCreateDirLayer() {
      this.$refs.createdir.toggle(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  height: 100%;
  list-style: none;
  .nav-item {
    margin-left: 20px;
    text-decoration: none;
    color: $primary;
  }
}
</style>
